<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4" class="boxCard">
        <el-card class="box-card">
          <el-avatar :size="100" :src = "AvatarUrl"/>
          <h3>{{ store.state.userInfo.username }}</h3>
          <h3>{{ store.state.userInfo.role == 1 ? "管理员" : "编辑" }}</h3>
        </el-card>
      </el-col>
      <el-col :span="20"
        ><div class="grid-content ep-bg-purple-light" />
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>个人信息</span>
            </div>
          </template>
          <el-form :model="userForm" label-width="120px" :rules="userFormRules" ref="userFormRef">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="userForm.username" />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-select
                v-model="userForm.gender"
                placeholder="please select your zone"
              >
                <el-option label="匿名" :value="0" />
                <el-option label="男" :value="1" />
                <el-option label="女" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="描述" prop="introduction">
              <el-input type="textarea" v-model="userForm.introduction" />
            </el-form-item>

            <el-form-item label="头像" prop="avatar">
              <el-upload
                class="avatar-uploader"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="handleChange"
              >
                <img
                  v-if="userForm.avatar"
                  :src="uploadAvatar"
                  class="avatar"
                />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" @click="submitForm()">更新</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { useStore } from "vuex";
import { reactive, ref, computed } from "vue";
import { Plus } from "@element-plus/icons-vue";
import axios from "axios";
// import config from '../../vue.config.js'
import { ElMessage } from "element-plus";
import upload from '@/util/upload.js'
import myUtil from "../../util/util.js"
const store = useStore();
const userFormRef = ref();

const AvatarUrl = computed(() => {
  return store.state.userInfo.avatar
    ? myUtil.devUrl + store.state.userInfo.avatar
    : "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png";
});

const uploadAvatar = computed(() => {
  return userForm.avatar.includes("blob") ? userForm.avatar : myUtil.devUrl + userForm.avatar;
})
console.log("tore.state.username", store.state.username);
const userForm = reactive({
  username: store.state.userInfo.username,
  gender: store.state.userInfo.gender,
  introduction: store.state.userInfo.introduction,
  avatar: store.state.userInfo.avatar,
  file:null
});
const userFormRules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  gender: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  introduction: [{ required: true, message: "请输入介绍", trigger: "blur" }],
  avatar:[{ required: true, message: "请输入介绍", trigger: "blur" }],
});

const handleChange = (file) => {
  console.log('file',file)
  console.log('URL.createObjectURL(file.raw)',URL.createObjectURL(file.raw))
  userForm.avatar = URL.createObjectURL(file.raw);
  userForm.file = file.raw
}

const submitForm = () => {
  userFormRef.value.validate(async (valid) => {
    if(valid) {
      console.log('valid',userForm)
      const res = await upload("/adminapi/user/upload",userForm);
      if(res.data.code == 200) {
        ElMessage.success('修改成功');
        store.commit('changeUserInfo',res.data.data)
      }else {
        ElMessage.error('修改失败');
      }
      console.log("fromres",res)
    }
  })
}
</script>

<style>
.boxCard {
  margin-top: 10px;
  text-align: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon,.avatar {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>